<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>{{ data.titleName }}</span>
      </div>
      <el-row v-loading="loading">
        <div style="width: 100%; height: 500px" :id="data.idName"></div>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    idName: "",
    titleName: ""
  };
  @Prop()
  protected orderData!: any;

  protected mounted() {
    this.$nextTick(() => {
      this.draw();
    });
  }
  @Watch("orderData", { deep: true })
  private draw() {
    this.$nextTick(() => {
      const { idName } = this.data;
      const xData: any = [];
      const seriesData: any = [];
      if (this.orderData && this.orderData.length) {
        this.orderData.forEach((el: any) => {
          xData.push(el.time);
          if (idName === "ElectricityQuantity") {
            seriesData.push(el.total_qty);
          } else {
            seriesData.push(Vue.prototype.$coinToYuan(el.avg_price));
          }
        });
      }

      if (this.data.idName) {
        const element: any = document.getElementById(this.data.idName);
        const myChart = Echarts.init(element);
        myChart.setOption({
          xAxis: {
            name: "交易时间",
            type: "category",
            data: xData
          },
          yAxis: {
            type: "value",
            min: 0,
            // max: 400,
            name: this.data.titleName
          },
          tooltip: {
            show: true
          },
          series: [
            {
              data: seriesData,
              type: "line",
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#077BE8"
                }
              }
            }
          ]
        });
        myChart.dispatchAction({
          type: "mousemove"
        });
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}

</style>


